<script setup>
import { getCurrentInstance, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { user } from '@/api/user.js';
import { setIsAdmin, setToken, setUserInfo } from '@/utils/cookie.js';
import { useCounterStore } from '@/stores/counter.js';

const router = useRouter();
const instance = getCurrentInstance();
const { $message } = instance.appContext.config.globalProperties;
const { setHeadImg } = useCounterStore();

const form = reactive({
  account: '', // 账号
  password: '', // 密码
});
// 注册按钮点击
function registerClick() {
  router.push('./register');
}
const accountError = ref(false); // 账号弹窗报错
const passwordError = ref(false); // 密码弹窗报错
// 账号输入
function accountInput() {
  if (accountError.value) {
    accountError.value = false;
  }
}
// 密码输入
function passwordInput() {
  if (passwordError.value) {
    passwordError.value = false;
  }
}
// 登录按钮点击
async function loginClick() {
  if (checkData()) {
    const returnData = await user({
      userName: form.account,
      password: form.password,
    });
    console.log(returnData);
    if (returnData?.code === 200) {
      setToken(returnData?.token);
      setIsAdmin(returnData?.isAdmin);
      setUserInfo({
        userName: returnData?.username,
        avatar: returnData?.avatar,
      });
      setHeadImg(returnData?.avatar);
      await router.push({ path: '/' });
    } else {
      $message.error(returnData?.msg);
    }
  }
}
// 校验数据
function checkData() {
  const { account, password } = form;
  if (account === '') {
    $message.error('账号信息为空，请输入账号！');
    accountError.value = true;
    return false;
  } else if (!/^1[3-9][0-9]{9}$/.test(account)) {
    $message.error('账号信息输入错误，请输入手机号！');
    accountError.value = true;
    return false;
  }
  if (password === '') {
    $message.error('密码信息为空，请输入密码！');
    passwordError.value = true;
    return false;
  }
  return true;
}
// 忘记密码
function forgetHandle() {
  router.push({ path: '/forgetPassword' });
}
</script>

<template>
  <div class="login-box">
    <div class="login-content">
      <div class="title">欢迎登录！</div>
      <div class="form-box">
        <div class="account-box login-form-box" :class="{ error: accountError }">
          <img src="../../assets/images/common/account-icon.png" alt="" />
          <el-input v-model="form.account" placeholder="请输入账号" @input="accountInput" />
        </div>
        <div class="password-box login-form-box" :class="{ error: passwordError }">
          <img src="../../assets/images/common/password-icon.png" alt="" />
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            type="password"
            show-password
            @input="passwordInput"
          />
        </div>
        <div class="forget-password-box">
          <span @click="forgetHandle">忘记密码？</span>
        </div>
        <div class="login-btn-box">
          <div class="register-btn btn" @click="registerClick">注册</div>
          <div class="login-btn btn" @click="loginClick">登录</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <img src="../../assets/images/common/project-icon.png" alt="" />
      <span>本服务由学术进修课堂提供</span>
    </div>
  </div>
</template>

<style scoped lang="less">
@import './login.less';
</style>
